<template>
	<div class="page-container padding-20 query-list-container">
		<div v-show="$route.name === 'movieOrderMgt'">
			<div class="search-container">
				<el-form :inline="true" ref="form" :model="searchData" size="small">
					<el-form-item label="关键字输入">
						<el-input v-model="searchData.keyword"></el-input>
					</el-form-item>
					<el-form-item label="站点">
            <el-select v-model="searchData.siteId" clearable>
              <el-option
                v-for="cinema in cinemaList"
                :key="cinema.id"
                :label="cinema.name"
                :value="cinema.id"
              ></el-option>
            </el-select>
          </el-form-item>
					<el-form-item label="统计时间">
						<el-date-picker
							v-model="searchData.rangeDate"
							type="daterange"
							align="right"
							unlink-panels
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="pickerOptions"
						></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSearch" size="small">查询</el-button>
					<el-button @click="onReset" size="small">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table class="mt-20 el-table-modify" :data="tableData" border>
				<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
				<el-table-column prop="num" align="center" label="订单号"></el-table-column>
				<el-table-column prop="memberNickName" align="center" label="用户名"></el-table-column>
				<el-table-column prop="memberPhone" align="center" label="联系电话"></el-table-column>
				<el-table-column prop="privilegeOrder" align="center" label="订单类型">
					<template slot-scope="scope">
						{{scope.row.privilegeOrder ? '权益用户' : '非权益用户'}}
					</template>
				</el-table-column>
				<el-table-column prop="siteName" align="center" label="站点名称"></el-table-column>
				<el-table-column prop="movieName" align="center" label="影片名称"></el-table-column>
				<el-table-column prop="amount" align="center" label="数量"></el-table-column>
				<el-table-column prop="actualPrice" align="center" label="实际支付金额"></el-table-column>
				<el-table-column prop="status" align="center" label="状态">
					<template slot-scope="scope">{{ORDER_STATUS[scope.row.status]}}</template>
				</el-table-column>
        <el-table-column prop="orderDate" align="center" label="下单时间">
					<template slot-scope="scope">{{scope.row.orderDate}}</template>
				</el-table-column>
				<el-table-column label="操作" align="center" fixed="right" width="72">
					<template slot-scope="scope">
						<el-button size="mini" type="text" @click="linkToDetail(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				ref="pagination"
				class="mt-20"
				background
				:page-size.sync="pageOption.pageSize"
				:total="pageOption.total"
				@size-change="onSizeChange"
				@current-change="onPageChange"
				layout="slot,->,prev,pager,next,sizes,jumper"
			>
				<span
					class="pagination-title"
				>共 {{pageOption.total}} 条记录 第 {{pageOption.page}} / {{pageOption.pageTotal}} 页</span>
			</el-pagination>
		</div>
		<router-view v-if="$route.name !== 'movieOrderMgt'"></router-view>
	</div>
</template>

<script>
import {ORDER_STATUS, pickerOptions, momentFormatStr} from '@/utils/const';
import {cinemaAllByName} from '@/api/cinema';
import {viewingOrder} from '@/api/order';
import moment from 'moment';

export default {
	name: "MovieOrderMgt",
	components: {},
	data() {
		this.ORDER_STATUS = ORDER_STATUS;
		this.pickerOptions = pickerOptions;

		let { siteId, rangeDate } = this.$route.params;

		return {
			cinemaList: [],
			searchData: {
				keyword: "",
				siteId: siteId || "",
				rangeDate: rangeDate || ["", ""]
			},
			tableData: [],
			pageOption: {
				page: 1,
				pageSize: 20,
				total: 0,
				pageTotal: 1
			},
			selectData: null,
			visible: false
		};
	},
	methods: {
		onSearch() {
			this.pageOption.page = 1;
			this.requestData();
		},
		onReset() {
			this.pageOption.page = 1;
			this.searchData.keyword = "";
			this.searchData.siteId = "";
			this.searchData.rangeDate = ['', ''];
			this.requestData();
		},
		linkToDetail(row) {
			this.$router.push({ name: "movieOrderDetail", params: { id: row.id } });
		},
		async requestData() {
			const {page, pageSize : size} = this.pageOption
			const postData = {}, searchData = this.searchData;

			if (searchData.keyword) {
				postData.keyword = searchData.keyword;
			}

			if (searchData.siteId) {
			  postData.siteId = searchData.siteId;
			}

			if (searchData.rangeDate[0]) {
				postData.start = moment(searchData.rangeDate[0]).format(
					momentFormatStr.date
				);
				postData.end = moment(searchData.rangeDate[1]).format(momentFormatStr.date);
			}

			const {data, total} = await viewingOrder({page: page - 1, size, ...postData});
			this.tableData = data;
			this.pageOption.total = total;
			this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1
			let childrenRefs = this.$refs.pagination.$children
			this.$nextTick(() => {
			  childrenRefs.forEach(child => child.$forceUpdate())
			});
		},
		onSizeChange(size) {
			this.pageOption.pageSize = size;
			this.requestData();
		},
		onPageChange(page) {
			this.pageOption.page = page;
			this.requestData();
		},
		async requestCinemaAll() {
      try {
        const result = await cinemaAllByName();
        this.cinemaList = result.data;
      } catch (err) {
        console.log(err);
      }
    },
	},
	created() {
		this.requestData();
		this.requestCinemaAll();
	}
};
</script>

<style lang="scss">
</style>